<template>
    <div>
		<top title="群组详情"></top>
		<!-- 头像 -->
		<ul class="list flex flex-center-y">
			<li v-for="item in formData" :key="item.uid">
				<profile
					@click.native="showPhone(item.userName,item.phone)"
					class="profile"
					:url="item.pictureUrl"
					width="1.1"
					height="1.1">
				</profile>
				<p>{{item.userName}}</p>
			</li>
		</ul>
		<!-- 项目名称 -->
		<group leftName="项目组名称" class="g">
			<template slot="right">
				<p>{{name}}</p>
			</template>
		</group>
		<!-- 消息免骚扰 -->
		<group leftName="消息免打扰" class="g">
			<template slot="right">
				<van-switch v-model="shield" size="20px" @change="change_mute"/>
			</template>
		</group>
		<!-- 聊天置顶 -->
		<group leftName="聊天置顶" class="g">
			<template slot="right">
				<van-switch v-model="top" size="20px" @change="change_top"/>
			</template>
		</group>
    </div>
</template>
<script>
import top from '@/components/title_bar/index.vue'
import profile from '@/components/performance/msgCenter/profile.vue'
import group from '@/components/performance/msgCenter/group.vue'
import {getuserUid} from '@/utils/auth.js'
export default {
	components:{
		top,
		profile,
		group
	},
    data(){
		return{
			name:"",
			formData:[], //群成员
			shield:"", //是否屏蔽
			top:"", //聊天置顶
			userId:"",
			toast:"",
		}
	},
	methods:{
		//加载中
		loading:function(msg){
			const toast = this.$toast.loading({
				duration: 0,
				mask: false,
				message: msg,
				forbidClick:true
			});
			return toast;
		},
		list:function(){
			HTTP('group_detail',{
				groupUid:this.$route.query.id,
				userUid:this.userId
			})
			.then(res=>{
				if(res.code == 200){
					console.log(res);
					this.name = res.data[0].name;  //群名
					this.formData = res.data[0].affiliations; //群成员
					this.top = res.data[0].isTop; //是否置顶
					this.shield = res.data[0].isNotDisturb; //是否免打扰
				}
				else{
					this.$toast(res.msg);
				}
			})
		},
		//显示手机号
		showPhone:function(name,phone){
			this.$toast({
				message:`${name}手机号：${phone}`,
				duration:6666
			});
		},
		//免打扰
		change_mute:function(){
			//this.toast = this.loading('加载中');
			HTTP('group_mute',{
				userUid:this.userId,
				groupUid:this.$route.query.id,
				flag:this.shield
			})
			.then(res=>{
				console.log(res);
				if(res.code == 200){
					this.toast.clear();
				}
				else{
					this.$toast(res.msg);
				}
			})
		},
		//置顶
		change_top:function(){
			//this.toast = this.loading('加载中');
			HTTP('group_top',{
				userUid:this.userId,
				groupUid:this.$route.query.id,
				flag:this.top
			})
			.then(res=>{
				console.log(res);
				if(res.code == 200){
					this.toast.clear();
				}
				else{
					this.$toast(res.msg);
				}
			})
		},
	},
	mounted:function(){
		this.list();
	},
	created:function(){
		this.userId = getuserUid();
	}
};
</script>
<style lang="scss" scoped>
	.list{
		flex-wrap: wrap;
		li{
			width: 1.1rem;
			height: 1.1rem;
			margin: 0.3rem 0 0.5rem 0.3rem;
			text-align: center;
			p{
				color: #666;
				padding-top: 4px;
				word-wrap: normal;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
			}
		}
	}
	.g{
		margin-top: 11px;
	}
</style>
